<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>裁剪上传</title>
    <link rel="icon" th:href="@{/img/icon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="ok-body">
            <blockquote class="layui-elem-quote">
                <p>裁剪上传图片 croppers</p>
            </blockquote>
            <pre lay-title="JavaScript">
layui.use('croppers', function () {
   var croppers = layui.croppers;

   croppers.render({
            elem: '#editimg'
            ,saveW: 150     //保存宽度
            ,saveH: 150
            ,mark: 1/1    //选取比例
            ,area: '900px'  //弹窗宽度
            ,url: baseUrl + "layuiUploadFile"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            ,done: function(url){
                $("#inputimgurl").val(url);
                $("#srcimgurl").attr('src',url);
            }
        });
});
   </pre>
            <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button >
            <img id="srcimgurl" style="width: 200px;height: 200px;border: 1px solid #1890ff;">
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">

    layui.use(['code', 'jquery', 'croppers'], function () {
        var $ = layui.jquery,
            croppers = layui.croppers,
            code = layui.code;

        var ctxPath = /*[[@{/}]]*/;
        var baseUrl = ctxPath + 'sys/sys-minio/';

        code({
            elem: 'pre',
            title: "代码示例",
            about: false
        });

        croppers.render({
            elem: '#editimg'
            ,saveW: 150     //保存宽度
            ,saveH: 150
            ,mark: 1/1    //选取比例
            ,area: '900px'  //弹窗宽度
            ,url: baseUrl + "layuiUploadFile"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            ,done: function(url){
                $("#inputimgurl").val(url);
                $("#srcimgurl").attr('src',url);
            }
        });

    });

</script>
</body>
</html>
